<template>
  <div class="tab">
    <div class="tab-container" :class="type === 'fixed' ? 'fixed' : ''" ref="tab">
      <div
        class="tab-item"
        :class="currentTab === index ? 'tab-item-active' : ''"
        v-for="(item, index) in tabs"
        :key="'tab' + item"
        :ref="'tab' + index"
        @click="handleSelectIdx(index)"
      >
        <span> {{ item.name }}</span>
        <i v-if="type !== 'fixed'" class="before-icon" :class="'icon-before-' + item.id"></i>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Tab',
  data() {
    return {
      currentTab: 0,
    };
  },
  props: {
    active: {
      type: Number,
      default: 0,
    },
    type: {
      type: String,
      default: 'normal',
    },
    tabs: {
      type: Array,
      default: () => [],
    },
  },
  watch: {
    active: {
      handler(newVal) {
        //执行代码
        this.currentTab = newVal;
      },
      immediate: true,
    },
  },
  methods: {
    handleSelectIdx(index) {
      this.$emit('change', index);
    },
  },
};
</script>

<style lang="less" scoped>
.fixed {
  position: fixed;
  top: 0;
  left: 0;
  background-color: #ffffff;
}
.before-icon {
  position: absolute;
  left: 0.34rem;
  top: 0.24rem;
  display: none;
}
.icon-before-rdjj {
  width: 1.06rem;
  height: 0.94rem;
  background-image: url('../../assets/images/rdjj-before.png');
  background-size: 100% 100%;
}
.icon-before-bdjj {
  width: 1.06rem;
  height: 0.94rem;
  background-image: url('../../assets/images/bdjj-before.png');
  background-size: 100% 100%;
}
.icon-before-ztjj {
  width: 1.06rem;
  height: 0.94rem;
  background-image: url('../../assets/images/ztjj-before.png');
  background-size: 100% 100%;
}
.icon-before-jsjj {
  width: 1.06rem;
  height: 0.94rem;
  background-image: url('../../assets/images/jsjj-before.png');
  background-size: 100% 100%;
}
.tab-container {
  display: flex;
  width: 100%;
  text-align: center;
  line-height: 1;
  z-index: 10;
}
.tab-item {
  display: block;
  padding-top: 0.36rem;
  padding-bottom: 0.16rem;
  line-height: 0.36rem;
  font-size: 0.28rem;
  position: relative;
  width: 25%;
  white-space: nowrap;
  color: rgba(0, 0, 0, 0.6);
  flex-shrink: 0;
  margin-right: 0.3rem;
  .update {
    width: 0.18rem;
    height: 0.18rem;
    border-radius: 50%;
    background: #fa3b32;
    position: absolute;
    right: -0.1rem;
    top: 0.2rem;
  }
}
.tab-item-active {
  color: rgba(0, 0, 0, 0.84);
  font-size: 0.28rem;
  font-weight: 500;
  .before-icon {
    display: block;
  }
  &::after {
    content: '';
    bottom: 0.04rem;
    background-color: #ff2436;
    border-radius: 0.04rem;
    width: 0.4rem;
    height: 0.06rem;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: block;
  }
}
</style>
